import React, { useState } from "react";
import { Form, Input, Button } from "antd-mobile";
import { EyeInvisibleOutline, EyeOutline } from "antd-mobile-icons";
import { Space, Toast } from "antd-mobile";
import axios from "../../utils/request";
import { useNavigate } from "react-router-dom";
function Zhuce() {
  const [visibles, setVisibles] = useState(false);
  const [visible, setVisible] = useState(false);
  const navigate = useNavigate();
  const onFinish = async (values) => {
    const res = await axios.post("/register", values);
    console.log(res);
    navigate('/login')
    Toast.show({
        icon: "success",
        content: "注册成功，请先登录",
      });
  };
  return (
    <div>
      <h1 >注册页面</h1>
      <Form
        onFinish={onFinish}
        layout="horizontal"
        footer={
          <Button block type="submit" color="primary" size="large">
            提交
          </Button>
        }
      >
        <Form.Item
          name="username"
          label="账号"
          rules={[
            { required: true, message: "不能为空" },
            { pattern: /\w+\w+\.com/, message: "请输入正确的邮箱" },
          ]}
        >
          <Input placeholder="请输入" />
        </Form.Item>
        <Form.Item
          label="密码"
          name="passwords"
          rules={[
            { required: true, message: "不能为空" },

          ]}
          extra={
            <div>
              {!visibles ? (
                <EyeInvisibleOutline onClick={() => setVisibles(true)} />
              ) : (
                <EyeOutline onClick={() => setVisibles(false)} />
              )}
            </div>
          }
        >
          <Input
            placeholder="请输入密码"
            clearable
            type={visibles ? "text" : "password"}
          />
        </Form.Item>
        <Form.Item
          label="确认密码"
          name="password"
          rules={[
            { required: true, message: "不能为空" },

          ]}
          extra={
            <div>
              {!visible ? (
                <EyeInvisibleOutline onClick={() => setVisible(true)} />
              ) : (
                <EyeOutline onClick={() => setVisible(false)} />
              )}
            </div>
          }
        >
          <Input
            placeholder="请输入密码"
            clearable
            type={visible ? "text" : "password"}
          />
        </Form.Item>
      </Form>
    </div>
  );
}

export default Zhuce;
